import React, { PureComponent } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './style.css'
export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      books: [
        { id: 1, name: '你不知道的JS', price: 12 },
        { id: 2, name: 'JS高级程序设计', price: 32 },
        { id: 3, name: 'React的奇妙', price: 2 },
      ]
    }
  }
  addNewBook() {
    const books = [...this.state.books]
    books.push({ id: new Date().getTime(), name: 'Vue设计', price: '11' })
    this.setState({ books })
  }
  delBook(index) {
    const books = [...this.state.books]
    books.splice(index, 1)
    this.setState({ books })
  }
  render() {
    const { books } = this.state
    return (
      <div>
        <h2>书籍列表</h2>
        <TransitionGroup component="ul">
          {
            books.map((item, index) => {
              return (
                <CSSTransition key={item.id} classNames="book" timeout={1000}>
                  <li>
                    <span>{ item.name } - { item.price }</span>
                    <button onClick={() => this.delBook(index)}>删除</button>
                  </li>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <button onClick={() => this.addNewBook()}>添加新书</button>
      </div>
    )
  }
}

export default App